<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="tabs">	
			<view class="tab" :class="{ active: activeTab === '待确认' }" @click="setActiveTab('待确认')" >待确认</view>
			<view class="tab" :class="{ active: activeTab === '待签署' }" @click="setActiveTab('待签署')">待签署</view>
			<view class="tab" :class="{ active: activeTab === '待支付' }" @click="setActiveTab('待支付')">待支付</view>
			<view class="tab" :class="{ active: activeTab === '待出行' }" @click="setActiveTab('待出行')">待出行</view>
			<view class="tab" :class="{ active: activeTab === '已完成' }" @click="setActiveTab('已完成')">已完成</view>
		</view>
		<!-- 内容区域 -->
		<scroll-view class="order-list" scroll-y>
			<view v-for="order in filteredOrders" :key="order.id" class="order-item">
				<view class="order-content">
					<view class="order-details">
						<text class="order-title">{{ order.productName }}</text>
						<text class="order-info">成人 ¥{{ order.adultPrice }} x{{ order.adultCount }}，老人/学生 ¥{{ order.seniorStudentPrice }} x{{ order.seniorStudentCount }}</text>
						<text class="order-info">提交人：{{ order.userName }}</text>
						<text class="order-info">创建时间：{{ order.setoffTime }}</text>
						<view class="divider"></view>
						<view class="order-status">
							<text :class="statusText(order.state)" class="status-text">{{order.state}}</text>
							<text class="order-action" @click="navigateTo(order.state,order.id)">{{ actionText(order.state) }}</text>
						</view>
					</view>
					<image class="order-image" :src="order.image" mode="aspectFill" />
				</view>
			</view>
		</scroll-view>
		<tabBarVue :current="current"></tabBarVue>
	</view>
</template>

<script>
import tabBarVue from '../../../components/tabbar/tabbar.vue';
import getOrdersById from '../../../api/http.js'
export default {
	data() {
		return {
			activeTab: '待确认',
			current:1, 
			orders: []
		};
	},
	components:{
		tabBarVue
	},
	onShow(){
	      uni.hideTabBar({
	        animation: false
	      })
	      this.current = 1  // 公告页面和我的页面根据需要传入对应的索引号
	},
	created() {
		let identity = uni.getStorageSync('state') === 0 ? 'agent' : 'tourist'
		let id = uni.getStorageSync("id")
		getOrdersById(identity, id).then(res=>{
			this.orders = res.data
			console.log(this.orders)
		}) 
	},
	computed: {
		filteredOrders() {
			return this.orders.filter(order =>order.state === this.activeTab);	
		}
	},

	methods: {
		setActiveTab(tab) {
			this.activeTab = tab;
		},
		statusText(status) {
			switch (status) {
				case '待确认':
					return 'confirmed';
				case '待签署':
					return 'signed';
				case '待支付':
					return 'paid';
				case '待出行':
					return 'ready';
				case '已完成':
					return 'completed';
				default:
					return '';
			}
		},
		actionText(status) {
			switch (status) {
				case '待确认':
					return '修改合同';
				case '待签署':
					return '签署合同';
				case '待支付':
					return '查看合同';
				case '待出行':
					return '查看合同';
				case '已完成':
					return '查看合同';
				default:
					return '';
			}
		},
		navigateTo(page,oid) {
		  switch (page) {
			//修改合同
			case '待确认':
				console.log("订单id"+oid)
			  uni.navigateTo({
				url: '/pages/salesman/contract/editContract?oid='+oid
			  });
			  break;
			//查看合同
			case 'paid','ready','completed':
			  uni.navigateTo({
				// url: '/pages/pendingPayment/pendingPayment'
			  });
			  break;
			//签署合同
			case '待签署':
			  uni.navigateTo({
				url: '/pages/salesman/signature/signature'
			  });
			  break;
			default:
			  console.warn('Unknown page:', page);
		  }
		}
	}
};
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	.left-icon {
		position: absolute;
		left: 20px;
	}
	
	.right-icon {
		position: absolute;
		right: 20px;
	}
	
	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 10px 0;
	}
	
	.tab {
		font-size: 16px;
		color: #666;
		padding: 5px 0;
	}
	
	.tab.active {
		color: #007bff;
		border-bottom: 2px solid #007bff;
		font-weight: bold;
	}

.order-list {
		flex: 1;
		width: 95%;
		padding: 10px;
	}

	.order-item {
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	.order-item:last-child{
		margin-bottom: 100px;
	}

	.order-content {
		display: flex;
		justify-content: space-between;
	}

	.order-image {
		width: 120px;
		height: 80px;
		right: 12px;
		border-radius: 8px;
	}

	.order-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 10px;
	}

	.order-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.order-info {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 5px 0;
	}

	.order-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		margin-top: 5px;
	}
	.confirmed {
		color: #1989fa;
	}

	.signed {
		color: #07c160;
	}
	.paid {
		color: #ee0a24;
	}

	.ready {
		color:orange;
	}

	.completed {
		color: gray;
	}
/* 	.status-text {
		color: #007bff;
	} */

	.order-action {
		margin-right: -110px;
		font-size: 14px;
		color: #007bff;
	}

	.footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
	}

	.footer-item.active {
		color: #1989fa;
	}

	.footer-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 2px;
	}

	.footer-icon.active {
		filter: invert(45%) sepia(80%) saturate(1000%) hue-rotate(190deg) brightness(100%) contrast(95%);
	}
</style>